import React, {Component} from 'react';
import {Image, Text, View, StyleSheet,Pressable,  } from "react-native";
import {pxToDp} from "../../../../utils/styleKits";
import {Overlay} from 'teaset';
import Filter from "./filter.js";

// 推荐
class Recommend extends Component {
  render() {
    return (
      <View style={styles.recommendBox}>
        <View style={styles.recomImgBox}>
          <View style={styles.imgBox}>
            <Image style={styles.recomImg} source={{uri: 'https://www.itying.com/images/flutter/list1.jpg'}}/>
            <Text style={styles.imgText}>今日佳人</Text>
          </View>
          <View style={styles.recomInfo}>
            <View style={styles.recomInfoText}>
              <View style={styles.infoTextBox}>
                <Text style={{fontSize:pxToDp(12)}}>若只如初见 </Text>
                <Text style={{fontFamily: 'iconfont',color:'#e08fa6'}}>{'\ue68b'}</Text>
                <Text style={{fontSize:pxToDp(12)}}> 23岁</Text>
              </View>
              <Text style={{fontSize:pxToDp(12)}}>单身 | 大专 | 年龄相仿</Text>
            </View>

            <View style={styles.togetherNumBox}>
              <View style={styles.togetherImgBox}>
                <Text style={{ fontFamily: "iconfont", color: "red",fontSize: pxToDp(34)}} >{'\ue82b'}</Text>
                <Text style={{position: 'absolute', color: '#fff'}}>92</Text>
              </View>
              <Text style={styles.togetherNum}>缘分值</Text>
            </View>

          </View>
        </View>

        <View style={styles.recommendTextBox}>
          <Text>推荐</Text>
          <Pressable onPress={this.showOverlayView}>
            <Text style={{ fontFamily: "iconfont"}} >{'\ue631'}</Text>
          </Pressable>
        </View>
      </View>
    );
  }

  showOverlayView = () => {
    let overlayView = (
      <Overlay.View
        style={{ justifyContent: 'flex-end'}}
        modal={true}
        overlayOpacity={0.7}
        ref={v => this.overlayView = v}
      >
        {/*过滤*/}
        <Filter close={this.close}/>

      </Overlay.View>
    );
    Overlay.show(overlayView);
  };

  // 关闭底部弹窗
  close = () => {
    this.overlayView && this.overlayView.close();
  }
}

const styles = StyleSheet.create({
  // 推荐
  recommendBox:{
    backgroundColor: '#ddd',
  },
  recomImgBox: {
    flexDirection: 'row',
  },
  imgBox: {
    marginLeft: pxToDp(10),
    position: 'relative',
  },
  recomImg: {
    width: pxToDp(140),
    height: pxToDp(140),
  },
  imgText:{
    position: 'absolute',
    left: 0,
    bottom: pxToDp(5),
    backgroundColor: 'rgba(147,79,205,0.83)',
    padding: pxToDp(5),
    color: '#fff',
    borderRadius: pxToDp(8),
  },
  recomInfo: {
    backgroundColor: '#fff',
    marginTop: pxToDp(5),
    marginRight: pxToDp(5),
    marginBottom: pxToDp(5),
    flex: 1,
    flexDirection: 'row',
  },
  recomInfoText: {
    justifyContent: 'space-around',
    paddingTop: pxToDp(16),
    paddingBottom: pxToDp(16),
  },
  infoTextBox: {
    flexDirection: 'row',
  },
  togetherNumBox: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  togetherNum: {
    color: 'red',
  },
  recommendTextBox: {
    margin: pxToDp(10),
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  togetherImgBox: {
    position: 'relative',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default Recommend;